<template>
  <div>
    <!-- 上面部分 -->
    <h2>派件作业管理</h2>
    <el-card style="margin:20px">
      <el-form :model="form">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="派件任务编号：" prop="id" label-width="120px">
              <el-input v-model="form.id" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="订单编号：" prop="orderId" label-width="120px">
              <el-input v-model="form.orderId" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所属营业部：" prop="agencyName" label-width="120px">
              <el-input v-model="form.agencyName" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="签收状态：" label-width="120px">
              <el-select v-model="form.signRecipient">
                <el-option
                  v-for="item in SignatureStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="预计完成时间：" prop="estimatedStartTime">
              <el-date-picker
                v-model="form.estimatedStartTime"
                style="width:60%"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00']"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="实际完成时间：" prop="actualEndTime">
              <el-date-picker
                v-model="form.actualEndTime"
                style="width:60%"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00']"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="任务分配状态：" prop="assignedStatus" label-width="120">
              <el-select v-model="form.assignedStatus">
                <el-option
                  v-for="item in taskState"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-button type="danger">搜索</el-button>
            <el-button>重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 中间部分 -->
    <el-card style="margin:20px">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">全部</el-tab-pane>
        <el-tab-pane label="新任务" name="second">新任务</el-tab-pane>
        <el-tab-pane label="已完成" name="third">已完成</el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 下面部分 -->
    <el-card style="margin:20px">
      <el-button type="danger">人工分配</el-button>
      <!-- stripe 带斑马纹表格  -->
      <el-table
        :data="list"
        stripe
        tooltip-effect="dark"
        :selectable="selectable"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="selectable"
        />
        <el-table-column label="序号" type="index" />
        <el-table-column label="派件作业编号" prop="id" />
        <el-table-column label="订单编号" prop="orderId" />
        <el-table-column label="所在营业部" prop="agencyName" />
        <el-table-column label="任务分配状态" prop="assignedStatus" :formatter="formatAssigned" />
        <el-table-column label="快递员姓名" prop="courierName" />
        <el-table-column label="签收状态" prop="signStatus" :formatter="formatSignStatus" />
        <el-table-column label="签收人" prop="signRecipient" :formatter="formatSignRecipient" />
        <el-table-column label="预计开始时间" prop="estimatedStartTime" />
        <el-table-column label="预计完成时间" prop="estimatedEndTime" />
        <el-table-column label="实际时间" prop="actualEndTime" />
        <div />

        <template slot="empty">
          <img src="./kong.png" alt="">
          <div>没有找到您要的内容哦~</div>
        </template>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">

        <el-pagination
          :page-sizes="[10, 20, 30, 40, 50, 60, 70]"
          :page-size="aa.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="aa.total"
          @size-change="currentChange"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getPickUpPage } from '@/api/modules/scheduling/dispatchJob'
// import { getDispatchPage } from '@/api/modules/scheduling/pickupJob'
import dispatchNum from '@/constant/dispatch'
export default {
  data() {
    return {
      // 引入枚举数据库
      dispatchNum,
      // 默认激活第一块tab
      activeName: 'first',
      // 签收状态
      SignatureStatus: [
        { value: 2, label: '已签收' },
        { value: 1, label: '拒签' }
      ],
      // 待分配状态
      taskState: [
        { value: 1, label: '已分配' },
        { value: 2, label: '待人工分配' }
      ],
      form: {
        id: '',
        orderId: '',
        agencyName: '',
        estimatedStartTime: '',
        actualEndTime: '',
        assignedStatus: '',
        signRecipient: ''
      },
      aa: {
        page: 1,
        pageSize: 10,
        taskType: 2,
        total: 0
      },
      list: []

    }
  },
  async created() {
    this.loadPage()
  },
  methods: {
    // 加载页面数据
    async loadPage() {
      const res = await getPickUpPage(this.aa)
      console.log(res.data)
      this.list = res.data.items
      const { counts, page, pageSize } = res.data
      this.aa.total = Number(counts)
      this.aa.page = page
      this.aa.pageSize = pageSize
    },

    handleClick() {},
    handleSelectionChange() {},
    selectable() {},
    currentChange() {},
    // 枚举数据
    formatAssigned(row, column, val, index) {
      const res = dispatchNum.assignedStatus.find(v => v.id === val)
      return res ? res.value : '未知'
    },
    formatSignStatus(row, column, val, index) {
      const res = dispatchNum.signStatus.find(v => v.id === val)
      return res ? res.value : '未知'
    },
    formatSignRecipient(row, column, val, index) {
      const res = dispatchNum.signRecipient.find(v => v.id === val)
      return res ? res.value : '未知'
    }
  }
}
</script>

<style>

</style>
